<template>
  <div class="home">
    <div class="topSwiper">
      <el-carousel width="1920px" height="1150px" :interval="5000" arrow="always">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <!-- <h3>{{item.id}}</h3> -->
          <el-image
          style="width: 100%; height: 100%"
          :src="api + banner.image"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="changeTime">
      <ul>
        <li>
          <h3>入住时间</h3>
          <div class="change">
            <b>26</b>
            <img src="@/views/home/homeImages/直线 19@2x.png" alt="">
            <div class="sept"><i>Sept</i><img src="@/views/home/homeImages/路径 53@2x.png" alt=""></div>
            <div class="block">
              <el-date-picker
              format="dd"
                v-model="value1"
                type="date"
                :placeholder="day">
              </el-date-picker>
            </div>
          </div>
        </li>
        <li>
          <h3>离店时间</h3>
          <div class="change">
            <b>28</b>
            <img src="@/views/home/homeImages/直线 19@2x.png" alt="">
            <div class="sept"><i>Sept</i><img src="@/views/home/homeImages/路径 53@2x.png" alt=""></div>
            <div class="block">
              <el-date-picker
              format="dd"
                v-model="value2"
                type="date"
                :placeholder="day02">
              </el-date-picker>
            </div>
          </div>
        </li>
        <li>
          <h3>居住人数</h3>
          <div class="change">
            <el-input-number v-model="juzhuNum"  controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
          </div>
        </li>
        <li>
          <h3>儿童人数</h3>
          <div class="change">
            <el-input-number v-model="childrenNum"  controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
          </div>
        </li>
        <li>
          <router-link to="/reservation">
          <span>了解详情</span>
          <span>Order</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="about">
      <div class="aboutTitle">
        <b>ROSEWOOD</b>
        <img src="@/views/home/homeImages/直线 8@2x.png" alt="">
        <span>关于紫檀</span>
      </div>
      <div class="synopsis">
        <div class="synopsisText">
          <h3>紫檀简介</h3>
          <img src="@/views/home/homeImages/直线 6@2x.png" alt="">
          <span>
            <p v-html="jianjie.paragraph"></p>
            <b><router-link to="/about">了解更多</router-link></b>
          </span>
        </div>
        <div class="synopsisImg">
          <img :src="api + jianjie.image" alt="">
        </div>
      </div>
    </div>
    <div class="reserve">
      <div class="reserveTitle">
        <b>ROSEWOOD</b>
        <img src="@/views/home/homeImages/直线 8@2x.png" alt="">
        <span>紫檀预定</span>
      </div>
      <div class="reserveBg">
        <div class="reserveSwiper">
          <el-carousel arrow="always" indicator-position="none" :interval="4000" type="card" height="500px">
            <div class="vv">
              <el-carousel-item v-for="banner2 in banners2" :key="banner2.id">
                <el-image
                style="width: 100%; height: 100%"
                :src="api + banner2.image"
                @click="jumpToRoom()"
                ></el-image>
              </el-carousel-item>
            </div>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="ZTService">
      <div class="ZTServiceTitle">
        <b>ROSEWOOD</b>
        <img src="@/views/home/homeImages/直线 8@2x.png" alt="">
        <span>紫檀服务</span>
      </div>
      <div class="serviceList">
        <ul>
          <li>
            <img src="@/views/home/homeImages/路径 41@2x.png" alt="">
            <span>优惠房价项目</span>
          </li>
          <li>
            <img src="@/views/home/homeImages/组 11@2x.png" alt="">
            <span>免费Wi-Fi</span>
          </li>
          <li>
            <img src="@/views/home/homeImages/路径 33@2x.png" alt="">
            <span>手机登记入库</span>
          </li>
          <li>
            <img src="@/views/home/homeImages/组 9@2x.png" alt="">
            <span>赚取免费入住</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="ZTShopping">
      <div class="ZTShoppingTitle">
        <b>ROSEWOOD</b>
        <img src="@/views/home/homeImages/直线 8@2x.png" alt="">
        <span>紫檀精品</span>
      </div>
      <div class="shopCon" v-if="shoppings">
        <div class="shopConLeft">
          <div class="shopConList">
            <div class="shopConimg">
              <img :src="api + shoppings[0].image" alt="">
            </div>
            <div class="shopConshuoming">
              <h3>{{shoppings[0].title}}</h3>
              <img src="@/views/home/homeImages/直线 6@2x.png" alt="">
              <span>{{shoppings[0].content}}</span>
              <b><router-link to="/content?id=2&name=shop">了解更多</router-link></b>
            </div>
          </div>
          <div class="shopConOtherText" @click="toShop">
            <span>紫檀风味<img src="@/views/home/homeImages/组 19@2x.png" alt=""></span>
          </div>
        </div>
        <div class="shopConCenter">
          <div class="shopConOtherText">
            <span>“Explore the flavor of hometown”</span>
            <b></b>
          </div>
           <div class="shopConList">
             <div class="shopConimg">
              <img :src="api + shoppings[1].image" alt="">
            </div>
            <div class="shopConshuoming">
              <h3>{{shoppings[1].title}}</h3>
              <img src="@/views/home/homeImages/直线 6@2x.png" alt="">
              <span>{{shoppings[1].content}}</span>
              <b><router-link to="/content?id=3&name=shop">了解更多</router-link></b>
            </div>
          </div>
        </div>
        <div class="shopConRight">
          <div class="shopConrightTop" @click="toTaozi">
            <img :src="api + shoppings[2].image" alt="">
            <div class="title">
              <b></b>
              <span>{{shoppings[2].title}}</span>
            </div>
          </div>
          <div class="shopConrightBottom" @click="toApple">
            <img :src="api + shoppings[3].image" alt="">
            <div class="title">
              <b></b>
              <span>{{shoppings[3].title}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ZTvideo">
      <div class="videoCon">
        <img src="@/views/home/homeImages/video.png" alt="">
        <div class="button-title">
          <div class="button">
            <el-dialog title :visible.sync="dialogPlay" width="50%" @close="closeDialog">
              <video :src="api + videoUrl" poster="@/views/home/homeImages/手机静物摄影-苹果-大自然-光影-苹果 图片素材.png" controls autoplay preload="metadata" class="video" :ref="video"
              width="100%"></video>
            </el-dialog>
            <img @click="dialogPlay = true" src="@/views/home/homeImages/组 32@2x.png" alt=""></div>
          <span>一城，一院，一家，一卧</span>
        </div>
      </div>
    </div>
    <div class="ZTstory">
      <div class="ZTstoryTitle">
        <b>ROSEWOOD</b>
        <img src="@/views/home/homeImages/直线 8@2x.png" alt="">
        <span>紫檀故事</span>
      </div>
      <div class="con" v-if="storys">
        <div class="storyTop">
          <div class="storyImg">
            <img :src="api + storys[0].image" alt="">
          </div>
          <div class="storyText">
            <h3>{{storys[0].storyTitle}}</h3>
            <img src="@/views/home/homeImages/直线 6@2x.png" alt="">
            <span>{{storys[0].storyContent}}</span>
            <b><router-link to="/content?id=1&name=story">了解更多</router-link></b>
          </div>
        </div>
        <div class="storyBottom">
          <div class="storyImg">
            <img :src="api + storys[1].image" alt="">
          </div>
          <div class="storyText">
            <h3>{{storys[1].storyTitle}}</h3>
            <img src="@/views/home/homeImages/直线 6@2x.png" alt="">
            <span>{{storys[1].storyContent}}</span>
            <b><router-link to="/content?id=2&name=story">了解更多</router-link></b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getSgBanners, getVideo, getJianjie, getSwiperSmall, getSC, getStory } from '../../api/home'
import { Carousel, carouselItem, Image, datePicker, inputNumber, Dialog } from 'element-ui'

Vue.use(Carousel)
Vue.use(carouselItem)
Vue.use(Image)
Vue.use(datePicker)
Vue.use(inputNumber)
Vue.use(Dialog)

export default {
  name: 'home',
  data () {
    return {
      value1: '',
      value2: '',
      banners: [],
      day: null,
      juzhuNum: 4,
      childrenNum: 2,
      dialogPlay: false,
      videoUrl: '',
      day02: '',
      video: '',
      api: '',
      jianjie: '',
      banners2: '',
      shoppings: '',
      storys: ''
    }
  },
  created () {
    getSgBanners().then(res => {
      this.banners = res.data
    }).catch(err => console.log('加载数据异常:', err))
    const aData = new Date()
    this.day = aData.getDate().toString()
    this.day02 = parseInt(this.day) + 2
    this.day02 = this.day02.toString()

    getVideo().then(res => {
      this.videoUrl = res.data.videoPath
    }).catch(err => console.log('加载数据异常:', err))

    getJianjie().then(res => {
      this.jianjie = res.data[1]
    }).catch(err => console.log('加载数据异常:', err))

    getSC().then(res => {
      this.shoppings = res.data
    }).catch(err => console.log('加载数据异常:', err))

    getSwiperSmall().then(res => {
      this.banners2 = res.data
    }).catch(err => console.log('加载数据异常:', err))

    getStory().then(res => {
      this.storys = res.data
    }).catch(err => console.log('加载数据异常:', err))

    this.api = 'http://47.96.89.247:8080/qf_hotel'
  },
  mounted () {
    // this.$refs.btn.onclik(function () {
    //   if (this.$refs.video.paused) {
    //     this.$refs.video.play()
    //   } else {
    //     this.$refs.video.pause()
    //   }
    // })
  },
  methods: {
  // 视频播放
    // playVideo (row) {
    //   this.dialogPlay = true
    // }
    handleChange (value) {
      console.log(value)
    },
    closeDialog () {
      this.videoUrl = '' // 清空数据 关闭视频播放
    },
    jumpToRoom () {
      this.$router.push('/roomIntroduction?id=7')
    },
    toTaozi () {
      this.$router.push('/content?id=4&name=shop')
    },
    toApple () {
      this.$router.push('/content?id=5&name=shop')
    },
    toShop () {
      this.$router.push('/shop')
    }
  }
}
</script>

<style src="./home.scss" lang="scss">

</style>
